import React, { Component } from 'react'
import {nanoid} from 'nanoid'
import { connect } from 'react-redux'
import {addPerson} from '../../redux/actions/person'

class Person extends Component {
  addPerson = () => {
    const name = this.nameNode.value
    const age = this.ageNode.value * 1
    const personObj = {id: nanoid(), name, age}
    this.props.addPerson(personObj)
    console.log("人", personObj)
    this.nameNode.value = ''
    this.ageNode.value = ''
  }

  render() {
    return (
      <div>
        <h3>我是Person组件。。。。</h3>
        <h4>上方组件求和为：{this.props.count}</h4>
        <input ref={c => this.nameNode = c} type="text" placeholder='输入名字'/>&nbsp;
        <input ref={c => this.ageNode = c} type="text" placeholder='输入年龄'/>&nbsp;
        <button onClick={this.addPerson}>添加</button>&nbsp;
        <ul>
          {
            this.props.persons.map((renObj)=>{
              return <li key={renObj.id}>{renObj.name} ----- {renObj.age}</li>
            })
          }
        </ul>
      </div>
    )
  }
}


export default connect(
  state => ({
    persons: state.persons, 
    count: state.count
  }),
  {
    addPerson
  }
)(Person)


